<template>
  <el-dialog
    title="预警详情"
    :visible.sync="visible"
    :width="popWidth"
    append-to-body
    :before-close="handleClose"
  >
    <div class="content">
      <lb-table
        :column="tableData.column"
        :data="tableData.data"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="sizesArr"
        :pager-count="5"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
        class="addCourseTypeTable"
      >
      </lb-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postalarmDetail, postwateralarmDetail } from "@/api/iot/inspect";
import { formatDate, dealElectricity } from "@/utils/index";
export default {
  components: {},
  props: {
    visible: { type: Boolean, default: false },
    resuestP: { type: Object, default: {} },
  },
  dicts: [
    "device_model", // 设备型号
    "wmeter_device_model", // 水表型号
    "voltage_status",
  ],
  data() {
    return {
      form: {},
      tableData: {
        column: [],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sizesArr: [5, 10, 20, 30],
      popWidth: "",
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.typeJudge();
        setTimeout(() => {
          this.getDetails();
        }, 200);
      }
    },
  },
  created() {},
  methods: {
    typeJudge() {
      this.currentPage = 1;
      this.pageSize = 10;
      switch (this.resuestP.type) {
        case "1":
          // 电表
          if (this.resuestP.deviceModel != "3") {
            this.pageSize = 5;
          }
          this.popWidth = "1000px";
          this.tableData.column = [
            {
              prop: "",
              label: "电流(A)",
              width: 200,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let that = this;
                let a, b, c, d;
                if (scope.row.deviceModel == "3") {
                  // 智能插座无ABC
                  a = <div></div>;
                  b = <div></div>;
                  c = <div></div>;
                  d = <div>电流:{dealElectricity(scope.row.ia, 1000, 3)}</div>;
                } else {
                  a = (
                    <div>A相电流:{dealElectricity(scope.row.ia, 1000, 3)}</div>
                  );
                  b = (
                    <div>B相电流:{dealElectricity(scope.row.ib, 1000, 3)}</div>
                  );
                  c = (
                    <div>C相电流:{dealElectricity(scope.row.ic, 1000, 3)}</div>
                  );
                  d = <div></div>;
                }
                return (
                  <div>
                    {a}
                    {b}
                    {c}
                    {d}
                  </div>
                );
              },
            },
            {
              prop: "",
              label: "电压(V)",
              width: 300,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let that = this;
                let a, b, c, d, ab, bc, ac;
                let inlineStyle;
                if (scope.row.deviceModel == "3") {
                  inlineStyle = {
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  };
                  a = <div></div>;
                  b = <div></div>;
                  c = <div></div>;
                  d = <div>电压:{dealElectricity(scope.row.ua, 100, 2)}</div>;
                  ab = <div></div>;
                  bc = <div></div>;
                  ac = <div></div>;
                } else {
                  inlineStyle = {
                    display: "flex",
                    justifyContent: "space-around",
                    alignItems: "center",
                  };
                  a = (
                    <div>A相电压:{dealElectricity(scope.row.ua, 100, 2)}</div>
                  );
                  b = (
                    <div>B相电压:{dealElectricity(scope.row.ub, 100, 2)}</div>
                  );
                  c = (
                    <div>C相电压:{dealElectricity(scope.row.uc, 100, 2)}</div>
                  );
                  d = <div></div>;
                  ab = (
                    <div>AB相电压:{dealElectricity(scope.row.uab, 100, 2)}</div>
                  );
                  bc = (
                    <div>BC相电压:{dealElectricity(scope.row.ubc, 100, 2)}</div>
                  );
                  ac = (
                    <div>AC相电压:{dealElectricity(scope.row.uac, 100, 2)}</div>
                  );
                }
                let columnStyle = {
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                };
                return (
                  <div style={inlineStyle}>
                    <div style={columnStyle}>
                      {a}
                      {b}
                      {c}
                      {d}
                    </div>
                    <div style={columnStyle}>
                      {ab}
                      {bc}
                      {ac}
                    </div>
                  </div>
                );
              },
            },
            {
              prop: "",
              label: "有功功率(KW)",
              width: 200,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let that = this;
                let a, b, c, d;
                if (scope.row.deviceModel == "3") {
                  a = <div></div>;
                  b = <div></div>;
                  c = <div></div>;
                  d = (
                    <div>有功功率:{dealElectricity(scope.row.pa, 1000, 3)}</div>
                  );
                } else {
                  a = (
                    <div>
                      A相有功功率:{dealElectricity(scope.row.pa, 1000, 3)}
                    </div>
                  );
                  b = (
                    <div>
                      B相有功功率:{dealElectricity(scope.row.pb, 1000, 3)}
                    </div>
                  );
                  c = (
                    <div>
                      C相有功功率:{dealElectricity(scope.row.pc, 1000, 3)}
                    </div>
                  );
                  d = <div></div>;
                }
                return (
                  <div>
                    {a}
                    {b}
                    {c}
                    {d}
                  </div>
                );
              },
            },
            {
              prop: "eventTime",
              align: "center",
              label: "事件时间",
              width: 180,
              showOverflowTooltip: true,
              render: (h, scope) => {
                let a = formatDate(scope.row.eventTime);
                return h(
                  "div",
                  {
                    style: {
                      color: "#000000",
                    },
                  },
                  a
                );
              },
            },
          ];
          break;
        case "2":
          // 水表
          this.popWidth = "800px";
          this.tableData.column = [
            {
              prop: "deviceTotalData",
              width: 200,
              align: "center",
              label: "设备累计流量（升）",
              showOverflowTooltip: true,
            },
            {
              prop: "signalIntensity",
              width: 200,
              label: "信号强度",
              align: "center",
            },
            {
              prop: "voltageStatus",
              width: 200,
              label: "电压状态",
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                return (
                  <div>
                    <dict-tag
                      options={this.dict.type.voltage_status}
                      value={scope.row.voltageStatus}
                    />
                  </div>
                );
              },
            },
            {
              prop: "receiveTime",
              align: "center",
              label: "事件时间",
              width: 180,
              showOverflowTooltip: true,
              render: (h, scope) => {
                let a = formatDate(scope.row.receiveTime);
                return h(
                  "div",
                  {
                    style: {
                      color: "#000000",
                    },
                  },
                  a
                );
              },
            },
          ];
          break;
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getDetails();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDetails();
    },
    getDetails() {
      let query = {};
      console.log(this.resuestP);
      query.pageSize = this.pageSize;
      query.pageNum = this.currentPage;
      if (this.resuestP.endTime) {
        query.endTime = new Date(this.resuestP.endTime).getTime();
      }
      query.startTime = new Date(this.resuestP.startTime).getTime();
      query.deviceCode = this.resuestP.deviceCode;
      let requestWay;
      let errCode = "";
      switch (this.resuestP.type) {
        case "1":
          // 电表
          requestWay = postalarmDetail;
          errCode = "2000981";
          break;
        case "2":
          // 水表
          requestWay = postwateralarmDetail;
          errCode = "2000991";
          break;
      }
      console.log(query, "qqcs");
      requestWay(query)
        .then((res) => {
          console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.tableData.data = res?.rows ?? [];
          this.total = res?.total ?? 0;
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!" + errCode);
        });
    },
    submit() {
      this.handleClose(1);
    },
    handleClose(flag) {
      this.$emit("update:visible", false);
      // this.resetForm("form");
      // let cc = false;
      // if (flag == 1) {
      //   cc = true;
      // }
      // this.$emit("popClose", cc);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
